<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册 - 五子棋</title>
  
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B5A2B',    // 木色主色调
            secondary: '#D2B48C',  // 浅木色
            accent: '#CD853F',     // 突出色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .board-texture {
        background-image: url('https://picsum.photos/id/129/1000/1000');
        background-size: cover;
        background-position: center;
        background-blend-mode: overlay;
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
      }
      .btn-hover {
        transition: all 0.3s ease;
      }
      .btn-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      }
    }
  </style>
</head>

<body class="bg-gradient-to-br from-amber-50 to-orange-100 min-h-screen font-sans flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-white/90 backdrop-blur-sm shadow-md sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <a href="index.html" class="flex items-center">
            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2">
              <i class="fa fa-gamepad text-white"></i>
            </div>
            <span class="text-xl font-bold text-primary">五子棋</span>
          </a>
        </div>
        <div class="flex items-center space-x-4">
          <a href="index.html" class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors">首页</a>
          <a href="login.html" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">登录</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="flex-grow flex items-center justify-center p-4 py-12">
    <div class="max-w-5xl w-full">
      <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="md:flex">
          <!-- 左侧：装饰区域 -->
          <div class="md:w-1/2 board-texture bg-secondary/90 p-8 md:p-12 flex items-center justify-center">
            <div class="text-center">
              <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-6 drop-shadow-md">加入棋局</h2>
              
              <div class="relative w-64 h-64 mx-auto mb-8">
                <!-- 棋盘背景 -->
                <div class="absolute inset-0 rounded-md border-4 border-white/80" style="background-image: 
                  linear-gradient(to right, rgba(255,255,255,0.6) 1px, transparent 1px),
                  linear-gradient(to bottom, rgba(255,255,255,0.6) 1px, transparent 1px);
                  background-size: 20% 20%;">
                </div>
                
                <!-- 调整后的棋子布局 -->
                <div class="absolute top-[20%] left-[20%] w-10 h-10 rounded-full bg-black shadow-md"></div>
                <div class="absolute top-[20%] left-[40%] w-10 h-10 rounded-full bg-black shadow-md"></div>
                <div class="absolute top-[20%] left-[60%] w-10 h-10 rounded-full bg-white border border-gray-300 shadow-md"></div>
                <div class="absolute top-[40%] left-[20%] w-10 h-10 rounded-full bg-white border border-gray-300 shadow-md"></div>
                <div class="absolute top-[40%] left-[40%] w-10 h-10 rounded-full bg-black shadow-md"></div>
                <div class="absolute top-[60%] left-[20%] w-10 h-10 rounded-full bg-black shadow-md"></div>
                <div class="absolute top-[60%] left-[40%] w-10 h-10 rounded-full bg-white border border-gray-300 shadow-md"></div>
              </div>
              
              <p class="text-white/90 text-lg">注册账号，开启你的五子棋之旅，与全国棋友一同切磋，乐享棋艺！</p>
            </div>
          </div>
          
          <!-- 右侧：注册表单 -->
          <div class="md:w-1/2 p-8 md:p-12">
            <div class="max-w-md mx-auto">
              <h2 class="text-2xl font-bold text-primary mb-6">账号注册</h2>
              
              <form id="register-form" class="space-y-5">
                <!-- 用户名 -->
                <div>
                  <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-user text-gray-400"></i>
                    </div>
                    <input type="text" id="username" name="username" 
                           class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus"
                           placeholder="请设置用户名" required>
                    <div class="hidden absolute right-3 top-1/2 -translate-y-1/2 text-green-500" id="username-valid">
                      <i class="fa fa-check-circle"></i>
                    </div>
                  </div>
                  <p class="hidden text-sm text-red-500 mt-1" id="username-error">用户名长度需4-16位</p>
                </div>
                
                <!-- 邮箱 -->
                <div>
                  <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-envelope text-gray-400"></i>
                    </div>
                    <input type="email" id="email" name="email" 
                           class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus"
                           placeholder="请输入邮箱地址" required>
                    <div class="hidden absolute right-3 top-1/2 -translate-y-1/2 text-green-500" id="email-valid">
                      <i class="fa fa-check-circle"></i>
                    </div>
                  </div>
                  <p class="hidden text-sm text-red-500 mt-1" id="email-error">请输入有效的邮箱地址</p>
                </div>
                
                <!-- 密码 -->
                <div>
                  <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-lock text-gray-400"></i>
                    </div>
                    <input type="password" id="password" name="password" 
                           class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus"
                           placeholder="请设置密码" required>
                    <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                      <i class="fa fa-eye-slash"></i>
                    </button>
                  </div>
                  <!-- 密码强度提示 -->
                  <div class="mt-1 text-xs text-gray-500">
                    密码需包含字母和数字，长度至少6位
                  </div>
                </div>
                
                <!-- 确认密码 -->
                <div>
                  <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-lock text-gray-400"></i>
                    </div>
                    <input type="password" id="confirm-password" name="confirm-password" 
                           class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus"
                           placeholder="请再次输入密码" required>
                    <button type="button" id="toggle-confirm-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                      <i class="fa fa-eye-slash"></i>
                    </button>
                  </div>
                  <p class="hidden text-sm text-red-500 mt-1" id="password-mismatch">两次输入的密码不一致</p>
                </div>
                
                <!-- 同意条款 -->
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <input id="agree-terms" name="agree-terms" type="checkbox" 
                           class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" required>
                  </div>
                  <div class="ml-2 text-sm">
                    <label for="agree-terms" class="text-gray-700">
                      我已阅读并同意<a href="./terms.html" class="text-primary hover:underline">用户协议</a>和<a href="./privacy.html" class="text-primary hover:underline">隐私政策</a>
                    </label>
                  </div>
                </div>
                
                <!-- 注册按钮 -->
                <div>
                  <button type="submit" class="btn-hover w-full bg-primary text-white py-3 px-4 rounded-lg font-medium text-center">
                    注册账号
                  </button>
                </div>
                
                <!-- 分隔线 -->
                <div class="relative">
                  <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-200"></div>
                  </div>
                  <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-white text-gray-500">或使用以下方式注册</span>
                  </div>
                </div>
                
                <!-- 第三方注册 -->
                <div class="flex gap-4">
                  <button type="button" class="flex-1 btn-hover flex items-center justify-center gap-2 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    <i class="fa fa-qq text-blue-500"></i>
                    <span>QQ注册</span>
                  </button>
                  <button type="button" class="flex-1 btn-hover flex items-center justify-center gap-2 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    <i class="fa fa-weixin text-green-500"></i>
                    <span>微信注册</span>
                  </button>
                </div>
              </form>
              
              <!-- 已有账号链接 -->
              <p class="mt-8 text-center text-gray-600">
                已有账号？ <a href="./login.html" class="text-primary font-medium hover:text-primary/80 transition-colors">立即登录</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-primary text-white py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center text-amber-200 text-sm">
        <p>© 2023 五子棋游戏 版权所有</p>
      </div>
    </div>
  </footer>

  <script>
    // 密码显示/隐藏切换
    function setupPasswordToggle(toggleBtnId, passwordInputId) {
      const toggleBtn = document.getElementById(toggleBtnId);
      const passwordInput = document.getElementById(passwordInputId);
      
      toggleBtn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        
        if (passwordInput.type === 'password') {
          passwordInput.type = 'text';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        } else {
          passwordInput.type = 'password';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        }
      });
    }
    
    // 初始化密码切换功能
    setupPasswordToggle('toggle-password', 'password');
    setupPasswordToggle('toggle-confirm-password', 'confirm-password');
    
    // 表单验证
    const username = document.getElementById('username');
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirm-password');
    
    // 用户名验证
    username.addEventListener('input', function() {
      const usernameValid = document.getElementById('username-valid');
      const usernameError = document.getElementById('username-error');
      
      if (this.value.length >= 4 && this.value.length <= 16) {
        this.classList.remove('border-red-500');
        this.classList.add('border-green-500');
        usernameValid.classList.remove('hidden');
        usernameError.classList.add('hidden');
      } else {
        this.classList.remove('border-green-500');
        if (this.value.length > 0) {
          this.classList.add('border-red-500');
          usernameError.classList.remove('hidden');
        } else {
          this.classList.remove('border-red-500');
          usernameError.classList.add('hidden');
        }
        usernameValid.classList.add('hidden');
      }
    });
    
    // 邮箱验证
    email.addEventListener('input', function() {
      const emailValid = document.getElementById('email-valid');
      const emailError = document.getElementById('email-error');
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      
      if (emailRegex.test(this.value)) {
        this.classList.remove('border-red-500');
        this.classList.add('border-green-500');
        emailValid.classList.remove('hidden');
        emailError.classList.add('hidden');
      } else {
        this.classList.remove('border-green-500');
        if (this.value.length > 0) {
          this.classList.add('border-red-500');
          emailError.classList.remove('hidden');
        } else {
          this.classList.remove('border-red-500');
          emailError.classList.add('hidden');
        }
        emailValid.classList.add('hidden');
      }
    });
    
    // 密码一致性验证
    function checkPasswordMatch() {
      const mismatchMsg = document.getElementById('password-mismatch');
      
      if (password.value && confirmPassword.value) {
        if (password.value === confirmPassword.value) {
          confirmPassword.classList.remove('border-red-500');
          confirmPassword.classList.add('border-green-500');
          mismatchMsg.classList.add('hidden');
        } else {
          confirmPassword.classList.remove('border-green-500');
          confirmPassword.classList.add('border-red-500');
          mismatchMsg.classList.remove('hidden');
        }
      } else {
        confirmPassword.classList.remove('border-green-500', 'border-red-500');
        mismatchMsg.classList.add('hidden');
      }
    }
    
    password.addEventListener('input', checkPasswordMatch);
    confirmPassword.addEventListener('input', checkPasswordMatch);
    
    // 使用jQuery AJAX提交表单
    $(document).ready(function() {
      $('#register-form').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交
        
        // 客户端验证
        let isValid = true;
        
        if (username.value.length < 4 || username.value.length > 16) {
          username.classList.add('border-red-500');
          isValid = false;
        }
        
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email.value)) {
          email.classList.add('border-red-500');
          isValid = false;
        }
        
        if (password.value !== confirmPassword.value) {
          confirmPassword.classList.add('border-red-500');
          isValid = false;
        }
        
        if (!document.getElementById('agree-terms').checked) {
          isValid = false;
        }
        
        // 验证通过则发送AJAX请求$$
        if (isValid) {
          // 构建注册信息对象
          var registerInfo = {
            username: $('#username').val(),
            email: $('#email').val(),
            password: $('#password').val()
          };
          
          // 发送POST请求
          $.ajax({
            type: "POST",
            url: './register', // 后端接口地址
            data: JSON.stringify(registerInfo),
            contentType: "application/json; charset=utf-8", // 设置请求头
            dataType: "json",
            success: function(res) {
              if (res.result==true) {
                alert('注册成功！即将跳转到登录页面');
                window.location.href = 'login.html';
              } else {
                alert('注册失败：' + (res.reason || '服务器错误'));
              }
            },
            error: function(xhr) {
              alert('请求失败：' + JSON.stringify(xhr.responseText || xhr.statusText));
            }
          });
        }//##
      });
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', () => {
      const mainContent = document.querySelector('main > div');
      mainContent.style.opacity = '0';
      mainContent.style.transform = 'translateY(20px)';
      mainContent.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
      
      setTimeout(() => {
        mainContent.style.opacity = '1';
        mainContent.style.transform = 'translateY(0)';
      }, 100);
    });
  </script>
</body>
</html>